<template>
	<view class="page" :style="{paddingTop: `${statusBarHeight}px`}">
		<u-sticky>
			<view class="top-bar">
				<view class="top-bar__l">
					<text>探索</text>
				</view>
			</view>
		</u-sticky>
		<z-paging ref="paging" fixed refresher-only class="paging" :data-key="2"
			:style="{top: `${statusBarHeight + 44}px`, bottom: `${safeAreaBottom + 60}px`}" refresher-vibrate
			refresher-background="transparent" safe-area-inset-bottom @query="onRefresh" show-refresher-when-reload
			show-refresher-update-time refresher-update-time-key="tab2" @scroll="onScroll">
			<view class="content">
				<view class="topic" v-for="(t, index) in topic" :key="index"
					:style="{ backgroundImage: `url(${t.img})`, height: `${topicImgHeight}px`}" @click="goTopic(t)">
					<view class="topic-title">{{ t.title }}</view>
					<view class="topic-label">{{ t.label }}</view>
					<view class="author">Create_By:&nbsp;&nbsp;&nbsp;{{ t.create }}</view>
				</view>
			</view>
			<view class="placeholder-bar-bottom"></view>
		</z-paging>
	</view>
</template>

<script>
	import mixins from '@/mixins/index.js'
	export default {
		mixins: [mixins],
		data() {
			return {
				topic: [{
						img: require('@/static/bg1.png'),
						title: '#骑行日记 #VLOG',
						label: '晒出你的骑行日记、分享你的骑行VLOG',
						create: '金金小张'
					},
					{
						img: require('@/static/bg2.png'),
						title: '#这个冬季 #一起去旅行',
						label: '用视频记录「这个冬季」吧',
						create: '金金小张'
					},
					{
						img: require('@/static/bg3.png'),
						title: '#2022年初雪#',
						label: '2022年的初雪！你所在的城市下雪了吗？',
						create: '金金小张'
					}
				]
			}
		},
		computed: {
			topicImgHeight() {
				return ((uni.getSystemInfoSync().windowWidth - 44) / (351 / 170)).toFixed(2)
			},
		},
		created() {
			console.log('init tab2');
		},
		methods: {
			goTopic(topic) {
				uni.navigateTo({
					url: `/pages/common/topic?title=${topic.title}&topicid=${topic.id}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import url('./common.scss');

	.page {
		padding: 0 22px;
	}

	.top-bar {
		height: 44px;

		&__l {
			color: #232832 !important;
			font-size: 20px;
			font-weight: 500;
			line-height: 23px;
		}
	}

	.content {
		padding: 10px 0;
		box-sizing: border-box;
	}

	.topic {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin: 18px 22px;
		border-radius: 18px;

		&-title {
			color: #FFFFFF;
			font-size: 24px;
			line-height: 34px;
			font-weight: 900;
		}

		&-label {
			color: #FFFFFF;
			font-size: 12px;
			line-height: 17px;
			font-weight: 500;
		}

		.author {
			position: absolute;
			right: 10px;
			bottom: 10px;
			color: #FFFFFF;
			font-size: 10px;
			line-height: 12px;
			font-weight: 400;
		}
	}
</style>